<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yolov5荔枝虫害AI识别</title>
    <!-- 引入字体图标样式,比特虫 -->
    <link rel="stylesheet" href="fonts/icomoon.css" />
    <link rel="shortcut icon" href="bitbug_favicon.ico" />
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/demo.css" />
    <link rel="stylesheet" href="./css/linkstyles.css" />
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/index.js"></script>


</head>

<body>


    <!-- 父容器大盒子 -->
    <div class="viewport">
        <!-- 第一列 -->
        <div class="column">
            <!-- 1. 异常、正常总数 -->
            <div class="overview">
                <ul>
                    <li>
                        <h4>1190</h4>
                        <span>
                            <i class="icon-dot" style="color: #ec4f00"></i>
                            设备总数
                        </span>
                    </li>
                    <li class="item">
                        <h4>190</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            季度新增
                        </span>
                    </li>
                    <li>
                        <h4>464</h4>
                        <span>
                            <i class="icon-dot" style="color: #fecb0b"></i>
                            运营设备
                        </span>
                    </li>
                    <li>
                        <h4>536</h4>
                        <span>
                            <i class="icon-dot" style="color: #1fb2f8"></i>
                            异常设备
                        </span>
                    </li>
                </ul>
                <div class="chart_1"></div>
            </div>

            <div class="insects">
                <h1><img src="./images/insects.png" alt="虫类预测统计"> 虫类预测统计</h1>
                <div class="chart_2"></div>
            </div>
        </div>


        <!-- 第二列 -->
        <div class="column">
            <!-- 大标题 -->
            <div class="grid__item color-7">
                <span class="link link--mallki">Yolov5 荔枝虫害AI识别<span data-letters="Yolov5 荔枝虫害AI识别"></span><span data-letters="Yolov5荔枝虫害AI识别"></span></span>
            </div>

            <!-- 图片序列展示 -->
            <div class="sequence">
                <h1><img src="./images/pictures.png" alt="">荔枝虫序列图片展示</h1>
                <div class="wrapper">
                    <span class="choose">序列组<img src="./images/list.png" alt=""></span>
                    <ul id="left" class="clearfix">
                        <li class="fda">
                            <a href="javascript:void(0)">序列1</a>
                        </li>
                        <li class="fda">
                            <a href="javascript:void(0)">序列2</a>
                        </li>
                        <li class="fda">
                            <a href="javascript:void(0)">序列3</a>
                        </li>
                        <li class="fda">
                            <a href="javascript:void(0)">序列4</a>
                        </li>
                        <li class="fda">
                            <a href="javascript:void(0)">序列5</a>
                        </li>
                    </ul>

                    <div class="pic">
                        <div class="film"><img src="./images/film.png" alt="">拍摄图</div>
                        <div id="png">
                            <div>
                                <img src="./images/insects1.png" />
                            </div>
                            <div>
                                <img src="./images/insects2.png" />
                            </div>
                            <div>
                                <img src="./images/insects3.png" />
                            </div>
                            <div>
                                <img src="./images/insects4.png" />
                            </div>
                            <div>
                                <img src="./images/insects5.png" />
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- 序列折线图 -->
            <div class="show_name">
                <div class="chart_3"></div>
            </div>

        </div>


        <!-- 第三列 -->
        <div class="column">
            <!-- 天气模块 -->
            <div class="weather">
                <p class="greetings">您好吗</p>
                <div class="container">
                    <div class="starry"></div>
                </div>

                <div class="degree_weather_short">
                    <span class="show_degree"></span>
                    <span class="show_weather_short"></span>
                </div>

                <div class="wind_direction_power">
                    <span class="show_wind_direction"></span>
                    <span class="show_wind_power"></span>
                </div>
                <p class="tip">● 光芒透过云缝，洒向大地 ~</p>
            </div>

            <!-- 搜素模块 -->
            <div class="search">

                <a href=""><button class="btn fda">搜索</button></a>
                <h1><img src="./images/search.png" alt=""> 虫情数据搜索</h1>
                <div class="tips">
                    <p>当前显示的果园：</p>
                    <select name="" id="select">

                    </select>
                </div>
                <div class="tips">
                    <p>请您输入需要查看日期的数据：</p>
                    <div class="time">
                        <span class="show_time_y">2021</span> 年
                        <span class="show_time_m">10</span> 月
                        <input type="text" class="show_time" title="3天之内都可以" placeholder="3d内"> 日
                    </div>
                </div>


            </div>

            <!-- 数据展示模块 -->
            <div class="monitor">
                <h1>
                    <span class="icon-cube"></span> 序列捕抓准确率显示
                    <a href="/list.html" class="fda">展开</a>
                </h1>
                <div class="content">
                    <div class="head">
                        <span class="col">序列</span>
                        <span class="col">名称</span>
                        <span class="col">准确率</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">
                            <div class="row">
                                <span class="col">1</span>
                                <span class="col">蛀蒂虫</span>
                                <span class="col">37 %</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">2</span>
                                <span class="col">金龟子</span>
                                <span class="col">50 %</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">3</span>
                                <span class="col">椿象</span>
                                <span class="col">94 %</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">4</span>
                                <span class="col">卷叶蛾</span>
                                <span class="col">65 %</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">5</span>
                                <span class="col">龟背天牛</span>
                                <span class="col">71 %</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">6</span>
                                <span class="col">毛毡病</span>
                                <span class="col">75 %</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">7</span>
                                <span class="col">荔枝瘿螨</span>
                                <span class="col">89 %</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">8</span>
                                <span class="col">尺蠖</span>
                                <span class="col">92 %</span>
                                <span class="icon-dot"></span>
                            </div>
                            <div class="row">
                                <span class="col">9</span>
                                <span class="col">小灰蝶</span>
                                <span class="col">66 %</span>
                                <span class="icon-dot"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>


</html>